<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="账单详情" name="first">
      <div class="search-list">
        <el-form :inline="true" :model="searchForm" class="form-inline" @submit.native.prevent>
          <el-form-item>
            <el-date-picker v-model="searchForm.timeArray" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" size="medium" value-format="timestamp"
              :unlink-panels="true" :clearable="false" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="searchList">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="out-btn">
          <el-button size="small" @click="outBill('xlsx', 'isExcelLoading')">
            <i v-if="isPdfLoading" class="img el-icon-loading"></i>
            <img v-else class="img" src="@/assets/images/form/excel-out.png" />
            <span class="text">{{isExcelLoading? '导出中...' : '导出excel'}}</span>
          </el-button>
          <el-button size="small" @click="outBill('pdf', 'isPdfLoading')">
            <i v-if="isPdfLoading" class="img el-icon-loading"></i>
            <img v-else class="img" src="@/assets/images/form/excel-out.png" />
            <span class="text">{{isPdfLoading ? '导出中...' :'导出PDF'}}</span>
          </el-button>
        </div>
      </div>
      <div class="bill-desc">
        注：本月扣费=云窍数量*云窍单价/12月+调阅费用+其他费用
      </div>
      <ElTable refName="billData" @pageChange="pageChange" :data-source="billData" :data-config="tableConfig"
        :total="total" :pageSize="pageSize" :pageNum="pageNum" :isLoading="isLoading">
      </ElTable>
    </el-tab-pane>
    <el-tab-pane label="充值记录" name="second">
      <ElTable refName="record" @pageChange="pageChange" :data-source="record" :data-config="rechargeConfig"
        :total="total" :pageSize="pageSize" :pageNum="pageNum" :isLoading="isLoading">
      </ElTable>
    </el-tab-pane>
    <el-tab-pane label="扣费记录" name="third">
      <ElTable refName="record" @pageChange="pageChange" :data-source="record" :data-config="deductionConfig"
        :total="total" :pageSize="pageSize" :pageNum="pageNum" :isLoading="isLoading">
      </ElTable>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {
  list, record
} from "@/api/member/bill";
import ElTable from "@/components/table/ElTable.vue";
import ExcelButton from "@/components/public-style/ExcelButton";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  props: {

  },
  data() {
    return {
      activeName: 'first',
      billData: [],
      record: [],
      searchForm: {
        timeArray: [],
      },
      tableConfig: [
        {
          prop: "code",
          label: "账单日期",
          width: "80px"
        },
        {
          prop: "boxCount",
          label: "云窍数量",
          width: "80px"
        },
        {
          prop: "boxPrice",
          label: "云窍单价",
          width: "80px"
        },
        {
          prop: "borrowEntityCount",
          label: "原件调阅次数",
          width: "120px"
        },
        {
          prop: "borrowDigitalCount",
          label: "电子化次数"
        },
        {
          prop: "borrowDigitalPage",
          label: "电子化页数"
        },
        {
          prop: "borrowPrice",
          label: "调阅费用",
          width: "85px"
        },
        {
          prop: "otherPrice",
          label: "其他费用",
          width: "85px"
        },
        {
          prop: "deductAmount",
          label: "扣费金额",
          width: "85px"
        },
        {
          prop: "rechargeAmount",
          label: "充值金额",
          width: "85px"
        },
        {
          prop: "balance",
          label: "当前余额",
          width: "85px"
        },
        {
          prop: "remark",
          label: "费用明细"
        }
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      rechargeConfig: [
        {
          prop: "createdOn",
          label: "充值时间"
        },
        {
          prop: "mode",
          label: "充值方式"
        },
        {
          prop: "money",
          label: "充值金额"
        },
        {
          prop: "balance",
          label: "当前余额"
        },
        {
          prop: "remark",
          label: "充值原因"
        }
      ],
      deductionConfig: [
        {
          prop: "createdOn",
          label: "扣费时间"
        },
        {
          prop: "mode",
          label: "扣费方式"
        },
        {
          prop: "money",
          label: "扣费金额"
        },
        {
          prop: "balance",
          label: "当前余额"
        },
        {
          prop: "remark",
          label: "扣费原因"
        }
      ],
      isExcelLoading: false,
      isPdfLoading: false
    };
  },
  components: {
    ElTable,
    ExcelButton
  },

  mounted() {
    this.getBillList();
  },
  methods: {
    getData() {
      if (this.activeName == "first") {
        this.getBillList();
      } else if (this.activeName == "second") {
        this.getRecordList(0);
      } else {
        this.getRecordList(1);
      }
    },
    // tab切换
    handleClick() {
      this.total = 0;
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },
    // 分页变化
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getData();
    },

    // 查询
    searchList() {
      this.pageNum = 1;
      this.getBillList();
    },

    // 获得账单列表
    getBillList() {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        startTime: this.searchForm.timeArray?.length > 0 ? parseInt(this.searchForm.timeArray[0] / 1000) : null,
        endTime: this.searchForm.timeArray?.length > 0 ? parseInt(this.searchForm.timeArray[1] / 1000) : null
      };
      this.isLoading = true;
      list(params)
        .then((res) => {
          this.billData = res.data;
          this.total = res.total;
          this.isLoading = false;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 获得充值/扣费记录
    getRecordList(type = 0) {
      const params = {
        type: type,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.isLoading = true;
      record(params)
        .then((res) => {
          res.data.length > 0 && res.data.map((e) => {
            e.mode = e.mode.info;
            e.createdOn = this.$moment(e.createdOn * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.record = res.data;
          this.total = res.tota;
          this.isLoading = false;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },

    // 导出账单
    outBill(fileType, load) {
      if (this.billData.length == 0) {
        this.$message.error('请选择有记录账单进行导出')
        return 
      }
      if (this[load]) return
      this[load] = true
      let url = fileType == 'pdf' ? 'exportPdf' : 'exportExcel';
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        startTime: this.searchForm.timeArray?.length > 0 ? parseInt(this.searchForm.timeArray[0] / 1000) : null,
        endTime: this.searchForm.timeArray?.length > 0 ? parseInt(this.searchForm.timeArray[1] / 1000) : null
      };
      axios({
        headers: {
          Authorization: JSON.parse(Cookies.get("userInfo")).token,
        },
        url: "/api/business/bill/" + url,
        method: "post",
        responseType: "blob", // 后台响应数据类型
        params: params
      }).then((response) => {
        this[load] = false
        let fname =
          "账单详情_" + this.$moment().format("YYYY-MM-DD") + "." + fileType;
        const link = document.createElement("a");
        link.href = window.URL.createObjectURL(new Blob([response.data]));
        link.setAttribute("download", fname);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }

  },
};
</script>

<style scoped lang="scss">
.bill-desc {
  margin: 10px 0;
}

.search-list {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 0;
    }
  }

  .form-inline {
    display: flex;
    align-items: center;
  }
}

.out-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  .img {
    height: 12px;
  }

  .text {
    margin-left: 3px;
    font-weight: bold;
  }

}
</style>
